<template>
    <div class="search-page">
        <a-space direction="vertical">
            <a-input-search v-model:value="value" placeholder="请输入学生名字" enter-button :loading="isLoading" allowClear
                @search="onSearch" />
        </a-space>
        <a-table class="table" :columns="columns" :dataSource="studentList" :pagination="{
            current: page.currentPage,
            pageSize: page.pageSize,
            total: page.total,
            onChange: changePage
        }">
            <template #bodyCell="{ column, record }">
                <a-space v-if="column.dataIndex === 'avatar'">
                    <img style="width:60px;heigth:60px" :src="record.avatar" :alt="record.stuName">
                </a-space>
                <a-space v-if="column.dataIndex === 'createdAt'">
                    {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
                </a-space>
            </template>
        </a-table>
    </div>
</template>

<script setup lang='ts'>
import dayjs from 'dayjs'
import type { IPage } from '@/types/table'
import type { IStudent, IStudentParams } from '@/types/user'
import { searchStudent } from '@/api/user'
import { message } from 'ant-design-vue';
const value = ref<string>('')

const onSearch = async (searchValue: string) => {
    isLoading.value = true
    searchValue ? await getList({ currentPage: page.currentPage, pageSize: page.pageSize, stuName: searchValue }) : studentList.value = []
    isLoading.value = false
}

const isLoading = ref(false)

const columns = [
    {
        title: '序号',
        customRender(obj: any) {
            // 要和当前的分页数据进行集合
            // 1 -> 1
            // 2 -> (页码 -1） * 每页条数 + 1
            return (page.currentPage - 1) * page.pageSize + obj.index + 1
        }
    },
    { title: '照片', dataIndex: 'avatar' },
    { title: '学号', dataIndex: 'stuNo' },
    { title: '姓名', dataIndex: 'stuName' },
    { title: '班级', dataIndex: 'className' },
    { title: '电话', dataIndex: 'tel' },
    { title: '注册时间', dataIndex: 'createdAt' },
]

const studentList = ref<IStudent[]>([])

const page = reactive<IPage>({
    currentPage: 1,
    pageSize: 5,
    total: 0
})

const getList = async (data: IStudentParams) => {
    const res = await searchStudent(data)
    if (res.data.total === 0) return message.warning('找不到该学生信息')
    studentList.value = res.data.student
}

const changePage = (c: number, p: number) => {
    page.currentPage = c,
        page.pageSize = p
    getList({ currentPage: page.currentPage, pageSize: page.pageSize, stuName: value.value })
}

</script>

<style scoped lang="less">
.table {
    margin-top: 20px;
}
</style>